<template>
  <div>
    <Header :isGoBack="false">
      <template v-slot:left> </template>
      <template v-slot:right>
        <div class="test-btn">
          <span class="btn-bg ml20">
            <el-button
              class="button button-border-second"
              @click="goStudyCenter"
            >
              返回学习中心
            </el-button>
          </span>
        </div>
      </template>
    </Header>
    <div class="test-report text-test-report w1200">
      <div class="arts-paper-container">
        <div class="arts-test-container">
          <div class="arts-paper-grade">
            <!-- <div class="paper-icon-grade" :class="isBig ? 'big-positon' : ''">
              <div class="bg-score" v-if="showBg"></div>
              <img
                v-if="paperScore >= 0 && paperScore < 60"
                src="@/assets/img/icon-grade1.png"
                alt=""
              />
              <img
                v-if="paperScore >= 60 && paperScore < 70"
                src="@/assets/img/icon-grade2.png"
                alt=""
              />
              <img
                v-if="paperScore >= 70 && paperScore < 80"
                src="@/assets/img/icon-grade3.png"
                alt=""
              />
              <img
                v-if="paperScore >= 80 && paperScore < 90"
                src="@/assets/img/icon-grade5.png"
                alt=""
              />
              <img
                v-if="paperScore >= 90 && paperScore < 100"
                src="@/assets/img/icon-grade6.png"
                alt=""
              />
              <img
                v-if="paperScore == 100"
                src="@/assets/img/icon-grade7.png"
                alt=""
              />
            </div> -->
            <!--  v-if="paperScore >= 85 && paperScore >= maxScore" -->
            <div
              class="test-score"
              :class="
                paperScore < 85
                  ? 'score-nopass'
                  : paperScore < 99
                  ? 'score-pass'
                  : ''
              "
            >
              <div class="paper-icon-grade" :class="isBig ? 'big-positon' : ''">
                <div class="bg-score" v-if="showBg"></div>
                <img
                  v-if="paperScore >= 0 && paperScore < 60"
                  src="@/assets/img/icon-grade1.png"
                  alt=""
                />
                <img
                  v-if="paperScore >= 60 && paperScore < 70"
                  src="@/assets/img/icon-grade2.png"
                  alt=""
                />
                <img
                  v-if="paperScore >= 70 && paperScore < 80"
                  src="@/assets/img/icon-grade3.png"
                  alt=""
                />
                <!-- <img
                v-if="paperScore > 42 && paperScore <= 56"
                src="@/assets/img/icon-grade4.png"
                alt=""
              /> -->
                <img
                  v-if="paperScore >= 80 && paperScore < 90"
                  src="@/assets/img/icon-grade5.png"
                  alt=""
                />
                <img
                  v-if="paperScore >= 90 && paperScore < 100"
                  src="@/assets/img/icon-grade6.png"
                  alt=""
                />
                <img
                  v-if="paperScore == 100"
                  src="@/assets/img/icon-grade7.png"
                  alt=""
                />
              </div>
              <div class="test-score-title">测试成绩</div>
              <div>
                <div class="test-text">本次测试获得</div>
                <div class="test-bg-score">
                  {{ paperScore }}分
                  <div class="test-add-i" v-if="addInt">
                    <img src="@/assets/img/bg-i-success.png" alt="" />
                    <span class="add-i-number">+{{ addInt }}</span>
                  </div>
                </div>
                <div class="test-text">
                  <span v-if="paperScore >= 0 && paperScore < 60"
                    >很遗憾 你仅到达了黑铁段位
                  </span>
                  <span v-if="paperScore >= 60 && paperScore < 70"
                    >很遗憾 你仅到达了青铜段位
                  </span>
                  <span v-if="paperScore >= 70 && paperScore < 80"
                    >很遗憾 你仅到达了白银段位
                  </span>
                  <!-- <span v-if="paperScore > 42 && paperScore <= 56"
                    >恭喜你 你的段位在黄金段位
                  </span> -->
                  <span v-if="paperScore >= 80 && paperScore < 90"
                    >恭喜你 你的段位在钻石段位
                  </span>
                  <span v-if="paperScore >= 90 && paperScore < 100">
                    恭喜你 你的段位在大师段位
                  </span>
                  <span v-if="paperScore >= 100">
                    太棒了 你到达了王者段位
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="text-book-item text-book-left container-text">
            <div class="reading-article mr20 text-book-contain">
              <div class="text-book-contain-box">
                <div class="check-language">
                  <div class="grade-read">
                    <span class="standard-right">标准</span>
                    <span class="general-right">一般</span>
                    <span class="read-error">不准确</span>
                    <span class="delete-error">漏读</span>
                  </div>
                  <div>
                    <el-button
                      class="button button-bg-primary"
                      @click="goTestPaper"
                      >再测一次</el-button
                    >
                  </div>
                </div>
                <div class="text-paragraph-list">
                  <div class="scorll-box">
                    <span
                      class="text-book-paragraph"
                      v-for="(item, index) in sentenceList"
                      :key="index"
                      :class="[item.name ? 'dialogue' : 'article']"
                      :ref="`sentence-${index}`"
                    >
                      <span class="name" v-if="item.name">
                        {{ item.name }}:
                      </span>
                      <br v-if="!item.name && item.format == 1" />
                      <span
                        class="text-content paragraph click"
                        :class="[
                          !item.name && item.format == 1
                            ? 'paragraph-first'
                            : '',
                        ]"
                        @click="item.isShowE = !item.isShowE"
                      >
                        <span v-if="!item.result"> {{ item.content }}</span>
                        <span v-if="item.result" class="result-read">
                          <span
                            v-for="(word, index) in getCheckedContent(item)"
                            :key="index"
                            :class="[
                              0 ? 'read-error' : '',
                              word.is_err == 1 ? 'delete-error' : '',
                              word.is_err == 2 && word.score >= 8
                                ? 'standard-right'
                                : '',
                              word.is_err == 2 && word.score < 8
                                ? 'general-right'
                                : '',
                            ]"
                            >{{ word.chars }}</span
                          >
                        </span>
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <PlayVoiceAudio ref="playVoiceAudio"></PlayVoiceAudio>
  </div>
</template>
<script>
import Header from "@/components/Header";
import PlayVoiceAudio from "../../../components/PlayVoiceAudio";
// import { postTestScore } from "@/api/text";
export default {
  data() {
    return {
      homeworkInfo: {
        question_info_type_list: [],
      },
      isHeaderFixed: false,
      showWrong: false,
      paperQuestionList: [],
      wrongQuestionList: [],
      paperScore: 0,
      addInt: 0,
      classInfo: {},
      typeObj: {
        0: "记忆",
        1: "英译汉",
        2: "汉译英",
        3: "听力理解",
        4: "听写",
        5: "默写",
      },
      rightNum: 0,
      wrongNum: 0,
      speedTest: 0,
      checkedBookData: {},
      isBig: true,
      showBg: true,
      fromRoute: null,
      sentenceList: [],
      paperData: {},
    };
  },
  computed: {},

  methods: {
    // 字符串去空
    trimAll(ele) {
      if (typeof ele === "string") {
        return ele.split(/[\t\r\f\n\s]*/g).join("");
      } else {
        console.error(
          `${typeof ele} is not the expected type, but the string type is expected`
        );
      }
    },
    getCheckedContent(data) {
      console.log(data, "data11111");
      const pattern_Sy = new RegExp(
        "[`~!@#$^&*()=|{}':;',\\[\\].<>《》/\?~！@#￥……&*（）——|{}【】‘；：”“'。，、？+-/ ]|[\\\\/]"
      );
      let content = [];
      let sentenceStr = this.trimAll(data.content);
      let wordIndex = 0;
      data.result.lines[0].words.forEach((item) => {
        if (item.text == "sil") return;
        let wordLength = item.text.length;
        content.push({
          chars: item.text,
          isSymbol: false,
          score: item.score,
          is_err: item.type,
        });
        wordIndex += wordLength;
        if (pattern_Sy.test(sentenceStr[wordIndex])) {
          content.push({
            chars: sentenceStr[wordIndex],
            isSymbol: true,
          });
          wordIndex += 1;
        } else {
          content.push({
            chars: " ",
            isSymbol: true,
          });
        }
      });
      console.log(content, "content");
      return content;
    },
    getText() {
      let textPaperRes = localStorage.getItem("textPaperRes");
      let res = textPaperRes ? JSON.parse(textPaperRes) : [];
      this.paperData = res;
      console.log(res.sentenceList, "res.sentenceList");
      this.sentenceList = res.sentenceList.map((item) => {
        return {
          id: item.id,
          content: item.content,
          translation: item.translation,
          name: item.name,
          format: item.format,
          result: item.result,
          score: item.score,
        };
      });
      this.paperScore = this.paperData.paperScore;
      this.addInt = this.paperData.addInt;
      let type;
      if (this.paperScore == 100) {
        type = 7;
      } else if (this.paperScore >= 90 && this.paperScore <= 99) {
        type = 6;
      } else if (this.paperScore >= 80 && this.paperScore < 90) {
        type = 5;
      } else if (this.paperScore >= 70 && this.paperScore < 80) {
        type = 3;
      } else if (this.paperScore >= 60 && this.paperScore < 70) {
        type = 2;
      } else if (this.paperScore < 60) {
        type = 1;
      }
      this.scoreAudioType = type;
      this.$refs.playVoiceAudio.changeType(type, true);
    },

    goTestPaper() {
      this.$router.push({
        name: "textTestPaper",
        query: {
          type: this.type,
          unitId: this.unitId,
        },
      });
    },

    goStudyCenter() {
      this.$router.push({
        name: "textStudyCenter",
      });
    },
    getHomeworkInfo() {},
    scrollBehavior() {
      let dom = document.getElementById("app");
      const top = dom.pageYOffset || dom.scrollTop || dom.scrollTop;
      if (top > 0) {
        this.isHeaderFixed = true;
      } else {
        this.isHeaderFixed = false;
      }
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.unitId = Number(this.$route.query.unitId);
    this.title = localStorage.getItem("checkedUnit")
      ? JSON.parse(localStorage.getItem("checkedUnit")).title
      : "";
    this.type = this.$route.query.type;
  },
  mounted() {
    this.getText();
    this.$nextTick(() => {
      setTimeout(() => {
        this.isBig = false;
      }, 500);
      setTimeout(() => {
        this.showBg = false;
      }, 1000);
    });
    document.getElementById("app").scrollTop = 0;
  },
  beforeRouteEnter(to, from, next) {
    // ...
    next((vm) => {
      vm.fromRoute = from;
    });
  },
  beforeDestroy() {},
  components: {
    Header,
    PlayVoiceAudio,
  },
};
</script>
